<template>
	<view class="page">
		<view class="Top-view">
			<view :style=" 'height:' + Custom_height + 'px' ">
				<view :style=" 'height:' + S_top + 'px' ">
				</view>
				<view :style="['height:' + S_height + 'px', 'line-height:' + S_height + 'px', 'margin-left: 10px' ] ">
					Alicja 零食小店
				</view>
			</view>
			<view class="profit-view" :style=" 'top:'+ pro_top +'px' ">
				<view class=".profit-num">
					<text>累计收益</text>
					<text>5.58</text>
				</view>
				<view class="profit-sale">
					<view>
						<text>今日销售额</text>
						<text>1.3</text>
					</view>
					<view>
						<text>今日订单数</text>
						<text>2</text>
					</view>
					<view>
						<text>累计订单数</text>
						<text>5</text>
					</view>
				</view>
			</view>
		</view>
		<view class="Gong-ge" :style=" 'top:' + go_ge_top + 'px' ">
			<view v-for="(item,i) in plate" :key="i">
				<image :src="item.image" mode="aspectFill"></image>
				<text>
					{{item.name}}
				</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		toRefs
	} from 'vue';
	// 存储胶囊按钮的位置：
	const search_data = reactive({
		S_height: 0, //胶囊按钮 的高度
		S_top: 0, //胶囊按钮 距离 顶部的距离
		Custom_height: 0, //title 这一部分的总距离
		pro_top: 0, //收益板块距离上方的 位置，并加上 top
		go_ge_top: 0, //九宫格距离顶部的位置
		plate:[
			{
				image: '/static/detail/hengfu.svg',
				name: "横幅管理"
			},
			{
				image: '/static/detail/miaosha.svg',
				name: "秒杀管理"
			},
			{
				image: '/static/detail/shangpin.svg',
				name: "商品管理"
			},
			{
				image: '/static/detail/dingdan.svg',
				name: "订单管理"
			},
			{
				image: '/static/detail/fenlei.svg',
				name: "分类管理"
			}
		]
	})
	const {
		S_height,
		S_top,
		Custom_height,
		pro_top,
		go_ge_top,
		plate
	} = toRefs(search_data)
	onMounted(() => {
		capSule();
		getGongeData();
	})
	// 获取 胶囊位置信息
	function capSule() {
		const btnData = wx.getMenuButtonBoundingClientRect()
		search_data.S_height = btnData.height;
		search_data.S_top = btnData.top;
		search_data.Custom_height = btnData.height + btnData.top;
		search_data.pro_top = btnData.height + btnData.top + 15;
	}

	function getGongeData() {
		const query = wx.createSelectorQuery()
		query.select('.profit-view').boundingClientRect()
		query.exec(function(res) {
			console.log('exec', res);
			search_data.go_ge_top = res[0].height + search_data.pro_top + 10
		})
	}
</script>


<style>
	page {
		background-color: #f4f4f4;
	}

	.Top-view {
		height: 330rpx;
		position: relative;
		background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
	}

	.profit-view {
		background-color: #FFFFFF;
		position: absolute;
		left: 20rpx;
		right: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.profit-num {
		display: flex;
		flex-direction: column;
		padding-bottom: 10rpx;
	}

	.profit-num text:nth-child(2) {
		font-size: 40rpx;
		padding-top: 10rpx;
	}

	.profit-sale {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.profit-sale view {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.profit-sale view text:nth-child(1) {
		color: #a7a7a7;
		padding-bottom: 10rpx;
	}

	.profit-sale view text:nth-child(2) {
		font-weight: bold;
	}

	.Gong-ge {
		background-color: #FFFFFF;
		margin: 0 20rpx 20rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		flex-wrap: wrap;
		position: absolute;
		left: 0;
		right: 0;
		color: #555555;
	}

	.Gong-ge image {
		width: 55rpx;
		height: 55rpx;
		display: block;
		margin-bottom: 20rpx;
	}

	.Gong-ge view {
		width: calc(25% - 10rpx*2);
		margin: 20rpx 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>